<template>
	<view class="homeLayout"> 
	
		<!-- <view class="searchNo">
			<uni-search-bar class="uni-mt-10" radius="100" placeholder="输入姓名/学号/班级" clearButton="auto" cancelButton="none" @confirm="search"  text-color="#1ec0ff"/>
		</view>
		<view class="condition">
			<view class="box">
				<uni-data-select
				        v-model="departmentValue"
				        :localdata="departmentRange"
				        @change="departmentChange"
				        placeholder="院系"
				></uni-data-select>
			</view>
			<view class="box">
				<uni-data-select
				        v-model="majorValue"
				        :localdata="majorRange"
				        @change="majorChange"
				        placeholder="专业"
				></uni-data-select>
			</view>
			<view class="box">
				<uni-data-select
				        v-model="gradeValue"
				        :localdata="gradeRange"
				        @change="gradeChange"
				        placeholder="年级"
				></uni-data-select>
			</view>
			<view class="box">
				<uni-data-select
				        v-model="isPayValue"
				        :localdata="isPayRange"
				        @change="isPayChange"
				        placeholder="是否缴费"
				></uni-data-select>
			</view>	
				
			 
				
				
			 
		</view> -->
		
		<view class="content">
			
				<uni-card title="华农经管学院" extra="" thumbnail="https://xinxinkc.online/static/upload/image/20241128/3f17b3d5b79a2206056644f1178bf2bb.png" class="xx-card" v-for="(item,index) in 3">
					<navigator url="/pages/user/studentInfo">
						<view class="row">
							<view class="left">
								学号
							</view>
							<view class="right">
								123455655
							</view>
						</view>
						
						<view class="row">
							<view class="left">
								姓名
							</view>
							<view class="right">
								刘德华
							</view>
						</view>
						
						<view class="row">
							<view class="left">
								学号
							</view>
							<view class="right">
								123455655
							</view>
						</view>
						
						<view class="row">
							<view class="left">
								专业
							</view>
							<view class="right">
								音乐
							</view>
						</view>
						
						<view class="row">
							<view class="left">
								年级
							</view>
							<view class="right">
								大三
							</view>
						</view>
					</navigator>
						
						<view class="bottom">
							<navigator url="/pages/user/studentInfo?current=9">
								<view class="box">
									<image src="../../static/zlws.png" mode=""></image>
									<view class="text">
										缴费
									</view>
								</view>
							</navigator>
							
							<navigator url="/pages/user/studentInfo?current=3">
							<view class="box">
								<image src="../../static/zlws.png" mode=""></image>
								<view class="text">
									学籍
								</view>
							</view>
							</navigator>
							
							<navigator url="/pages/user/studentInfo?current=0">
							<view class="box">
								<image src="../../static/zlws.png" mode=""></image>
								<view class="text">
									信息
								</view>
							</view>
							</navigator>
							
							<navigator url="/pages/user/studentInfo?current=2">
							<view class="box">
								<image src="../../static/zlws.png" mode=""></image>
								<view class="text">
									联系
								</view>
							</view>
							</navigator>
							
						</view>
				
				</uni-card>
	
			
		</view>
	</view>
	
	
	
		 
	
</template>

<script setup>
import { ref } from 'vue';

const departmentValue = ref(null);
const departmentRange =ref([
	{value:0,text:'音乐'},
	{value:1,text:'计算机'},
	{value:2,text:'汉语言'},
	{value:3,text:'国际贸易'}
]);

const majorValue = ref(null);
const majorRange =ref([
	{value:0,text:'音乐'},
	{value:1,text:'计算机'},
	{value:2,text:'汉语言'},
	{value:3,text:'国际贸易'}
]);

const gradeValue = ref(null);
const gradeRange =ref([
	{value:0,text:'大一'},
	{value:1,text:'大二'},
	{value:2,text:'大三'},
	{value:3,text:'大四'},
	{value:4,text:'研一'},
	{value:5,text:'研二'}
]);

const isPayValue = ref(null);
const isPayRange =ref([
	{value:0,text:'未缴费'},
	{value:1,text:'已缴费'},
]);

const search = (e)=>{
	console.log(e);
}
	
const departmentChange = (e)=>{
	console.log(e);
}

const majorChange = (e)=>{
	console.log(e);
}

const gradeChange = (e)=>{
	console.log(e);
}

const isPayChange = (e)=>{
	console.log(e);
}
</script>

<style lang='scss' scoped>
	 .homeLayout{
		  color:$xx-color-body;
		  .searchNo{
			  color: $xx-color-body;
		  }
		 .condition{
			 padding: 0 30rpx;
			 display: grid;
			 gap: 10rpx;
			 grid-template-columns: repeat(4,1fr);
		 }
		 .content{
			 .xx-card{
				 .row{
				 				  display: flex;
				 				  justify-content: space-between;
				 				  .left{
				 					  
				 				  }
				 				  
				 				  .right{
				 					 font-weight:600;
				 					 color: #000;
				 				  }
				 }
				 .bottom{
					border-top:0.5rpx solid #ddd;
					padding: 20rpx 0;
					margin-top: 20rpx;
				 	display: grid;
				 	gap: 10rpx;
				 	grid-template-columns: repeat(4,1fr);
					.box{
						display: flex;
						justify-content: center;
						align-items: center;
						color: $xx-color-body;
						image{
							width: 30rpx;
							height: 30rpx;
						}
					}
				 }
			 }
			 
			 
		 }
	 }      
</style>
